<template>
  <div>
    <Card>
      <div class="searchBox">
        <Form ref="searchForm" :label-width="70" :model="searchForm" class="search-form" inline>
          <Form-item label="选择用户" prop="personnel_id">
            <Select
              v-model="searchForm.personnel_id"
              clearable
              filterable
              @on-change="personnelId"
            >
              <Option
                v-for="item in personnelList"
                :key="item.id"
                :value="item.id"
              >{{ item.name }}
              </Option>
            </Select>
          </Form-item>
          <Form-item style="margin-left:-70px;">
            <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
            <Button @click="handleReset">重置</Button>
          </Form-item>
        </Form>
      </div>
    </Card>
    <Card style="margin-top:5px;">
      <div class="btns">
        <Button icon="ios-add" target="_self" type="primary" @click="toAdd">添加</Button>
        <!--        <Button icon="md-cloud-upload">导入</Button>-->
        <Button icon="md-cloud-download">导出</Button>
      </div>
      <div class="table">
        <Row>
          <Table
            ref="table"
            :columns="columns"
            :data="data"
            :loading="loading"
            border
            size="small">
            <template slot="action" slot-scope="{ row, index }">
              <a
                class="edit"
                size="small"
                style="color:#2d8cf0;font-size: 12px;"
                type="text"
                @click="toEdit(row)"
              >编辑</a>
              <Divider type="vertical"/>
              <a
                class="del"
                size="small"
                style="color:#ed4014;font-size: 12px;"
                type="text"
                @click="remove(row)"
              >删除</a>
            </template>
          </Table>
        </Row>
        <!-- <Row class="page" justify="end" type="flex">
          <Page
            :current="searchForm.pageNumber"
            :page-size="searchForm.pageSize"
            :total="total"
            @on-change="changePage"
            @on-page-size-change="changePageSize"
            show-total
          />
        </Row> -->
      </div>
      <Modal
        v-model="modal"
        :mask-closable="false"
        :styles="{top: '20px'}"
        title="添加离职人员"
        width="850"
        @on-cancel="cancel"
      >
        <Form ref="form" :label-width="160" :model="form" :rules="formValidate">
          <Row>
            <Col span="12">
            <FormItem v-if="model_type==1" label="选择人员" prop="personnel_name">
              <Input v-model="form.personnel_name" placeholder readonly></Input>
            </FormItem>
            </Col>
            <Col span="12">
            <FormItem v-if="model_type!=1" label="选择人员" prop="personnel_id">
              <Select
                v-model="form.personnel_id"
                clearable
                filterable
                @on-change="personnelId"
              >
                <Option
                  v-for="item in personnelList"
                  :key="item.id"
                  :value="item.id"
                >{{ item.name }}
                </Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="12">
            <FormItem label="入职时间" prop="join_at">
              <Input v-model="form.join_at" placeholder readonly></Input>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="12">
            <FormItem label="性别" prop="sex">
              <Input v-model="form.sex" placeholder readonly></Input>
            </FormItem>
            </Col>
            <Col span="12">
            <FormItem label="年龄" prop="age">
              <Input v-model="form.age" placeholder readonly></Input>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="12">
            <FormItem label="身份证号" prop="IDCard">
              <Input v-model="form.IDCard" placeholder readonly></Input>
            </FormItem>
            </Col>
            <Col span="12">
            <FormItem label="电话" prop="phone">
              <Input v-model="form.phone" placeholder readonly></Input>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="12">
            <FormItem label="离职时间" prop="departure_at">
              <DatePicker
                v-model="form.departure_at"
                :editable="false"
                placeholder="选择时间"
                type="date"
              ></DatePicker>
            </FormItem>
            </Col>
            <Col span="12">
            <FormItem label="离职原因" prop="departure_reason">
              <Input v-model="form.departure_reason" :rows="4" placeholder type="textarea"></Input>
            </FormItem>
            </Col>
          </Row>
        </Form>
        <div slot="footer">
          <Button :loading="loading" @click="handleReset('form')">重置</Button>
          <Button
            :loading="submitLoading"
            style="margin-left:8px"
            type="primary"
            @click="submitF('form')"
          >保存
          </Button>
        </div>
      </Modal>
    </Card>
  </div>
</template>
<script>
import {
  addDeparturePersonnel,
  departureDestroy,
  departureList,
  editDeparturePersonnel,
  personnelList
} from '../../../api/personnel'

export default {
  data() {
    return {
      total: 0,
      searchForm: {
        personnel_id: '',
        status: 1,
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      loading: false,
      submitLoading: false,
      modal: false,
      form: {
        personnel_id: 0,
        departure_at: '',
        departure_reason: ''
      },
      formValidate: {
        // personnel_id: [{ required: true, message: '请选择人员', trigger: 'change' }],
        // departure_at: [{
        //     type: 'string',
        //     required: true,
        //     message: '请选择离职时间',
        //     trigger: 'change'
        //   }]
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          type: 'index',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '姓名',
          key: 'name',
          width: 120,
          fixed: 'left',
          align: 'center'
        },
        {
          title: '离职时间',
          key: 'departure_at',
          width: 120,
          align: 'right'
        },
        {
          title: '性别',
          key: 'sex',
          width: 90,
          align: 'center'
        },
        // {
        //   title: '身份证号码',
        //   key: 'IDCard',
        //   width: 150,
        //   align: 'left'
        // },
        {
          title: '年龄',
          key: 'age',
          width: 100,
          align: 'center',
        },
        // {
        //   title: '联系电话',
        //   key: 'phone',
        //   width: 150,
        //   align: 'left'
        // },
        {
          title: '入职时间',
          key: 'join_at',
          width: 120,
          align: 'right'
        },
        {
          title: '创建时间',
          key: 'created_at',
          width: 200,
          align: 'right'
        },
        {
          title: '操作',
          slot: 'action',
          width: 175,
          fixed: 'right',
          align: 'center'
        }
      ],
      data: [],
      personnelList: [],
      model_type: 0
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getPersonnelList()
      this.clearSelectAll()
    },
    changePageSize(v) {
      this.searchForm.pageSize = v
      this.getPersonnelList()
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false)
    },
    getPersonnelList() {
      this.loading = true
      this.clearSelectAll()
      departureList(this.searchForm).then(res => {
        this.loading = false
        if (res.data) {
          this.data = res.data.personnel
          this.total = res.data.count
        }
      })
    },//在职
    getOnPersonnelList() {
      this.loading = true
      personnelList().then(res => {
        this.loading = false
        if (res.data) {
          this.personnelList = res.data.personnel
        }
      })
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      // 重新加载数据
      this.getPersonnelList()
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getPersonnelList()
    },
    init() {
      this.getPersonnelList()
      this.getOnPersonnelList()
    },
    remove(row) {
      departureDestroy({id: row.id, personnel_id: row.personnel_id}).then(res => {
        if (res.data) {
          this.getPersonnelList()
          this.cancel()
        } else {
          this.$Message.error('删除失败')
        }
      })
    },
    show(index) {
      this.$Modal.info({
        title: 'User Info',
        content: `Name：${this.personnel[index].name}<br>Age：${this.personnel[index].age}<br>Address：${this.personnel[index].address}`
      })
    },
    toAdd() {
      this.model_type = 0
      this.modal = true
    },
    toEdit(row) {
      this.model_type = 1
      this.form.id = row.id
      this.form.personnel_name = row.name
      this.form.personnel_id = row.personnel_id
      this.form.IDCard = row.IDCard
      this.form.phone = row.phone
      this.form.join_at = row.join_at
      this.form.sex = row.sex
      this.form.age = row.age
      this.form.departure_at = row.departure_at
      this.form.departure_reason = row.departure_reason
      this.modal = true
    },
    submitF() {
      if (this.model_type == 0) {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.submitLoading = true
            addDeparturePersonnel(this.form).then(res => {
              this.submitLoading = false
              if (res.data) {
                this.modal = false
                this.getPersonnelList()
                this.cancel()
              } else {
                this.$Message.error('保存失败')
              }
            })
          }
        })
      }
      if (this.model_type == 1) {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.submitLoading = true
            editDeparturePersonnel(this.form).then(res => {
              this.submitLoading = false
              if (res.data) {
                this.modal = false
                this.getPersonnelList()
                this.cancel()
              } else {
                this.$Message.error('保存失败')
              }
            })
          }
        })
      }
    },
    cancel() {
      this.$refs.form.resetFields()
    },
    personnelId() {
      const _this = this
      this.personnelList.forEach(function (c) {
        if (c.id == _this.form.personnel_id) {
          _this.form.IDCard = c.IDCard
          _this.form.phone = c.phone
          _this.form.join_at = c.join_at
          _this.form.sex = c.sex
          _this.form.age = c.age
        }
      })
    }
  }
}
</script>
